.quick-nav {
  color: white;
  background: transparentize($color: $color-secondary, $amount: 0.13);
  font-size: 1.25rem;

  .quick-nav-prev {
    float: left;
    text-align: left;
    width: 25%;

    @media (max-width: $tabletBrk) {
      width: 50%;
    }

    @media (max-width: $mobileBrk) {
      width: 10%;

      .nav-title {
        display: none;
      }
    }
  }

  .quick-nav-next {
    float: right;
    text-align: right;
    width: 75%;

    @media (max-width: $tabletBrk) {
      width: 50%;
    }

    @media (max-width: $mobileBrk) {
      width: 90%;
    }
  }

  a {
    display: flex;
    padding-top: 1.4em;
    padding-bottom: .4em;
    transition: opacity 250ms;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;

    .nav-button {
      margin: .2em;
      padding: .4em;

      svg {
        display: block;
        width: 1.2em;
        height: 1.2em;
        margin: 0 auto;
        fill: currentColor;
      }
    }

    .nav-title {
      position: relative;
      flex-grow: 1;
      font-size: .9em;
      line-height: 48px;

      > .nav-title-ellipsis {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .nav-direction {
        position: absolute;
        right: 0;
        left: 0;
        margin-top: -20px;
        font-size: .64em;
        opacity: .7;
      }
    }
  }
}
